<template>
  <div class="reggie">
    <a-form
        ref="formRef"
        name="custom-validation"
        :model="formState"
        :rules="rules"
        v-bind="layout"
        @finish="handleFinish"
        @validate="handleValidate"
        @finishFailed="handleFinishFailed"
    >
      <a-form-item has-feedback label="用户名" name="userName"
      >
        <a-input v-model:value="formState.userName" type="text" autocomplete="off" />
      </a-form-item>
      <a-form-item has-feedback label="密码" name="password">
        <a-input v-model:value="formState.password" type="password" autocomplete="off" />
      </a-form-item>
      <a-form-item has-feedback label="确认密码" name="checkPass">
        <a-input v-model:value="formState.checkPass" type="password" autocomplete="off" />
      </a-form-item>

<!--      <a-form-item has-feedback label="邮箱" name="mailbox">-->
<!--        <a-row orientation="left" :gutter="16">-->
<!--          <a-col style="margin-top: 5px" flex="auto" >-->
<!--            <a-input v-model:value="formState.mailbox" type="mailbox" autocomplete="off" />-->
<!--          </a-col>-->
<!--          <a-col style="margin-top: 5px" flex="none">-->
<!--            <a-button :disabled="disabled" type="primary" html-type="submit" class="">-->
<!--              验证-->
<!--            </a-button>-->
<!--          </a-col>-->
<!--        </a-row>-->
<!--      </a-form-item>-->
<!--      <a-form-item has-feedback label="验证码" name="verificationCode">-->
<!--        <a-input v-model:value="formState.verificationCode"  autocomplete="off" />-->
<!--      </a-form-item>-->
      <a-form-item>
        <a-button :loading="loading" @click="toRegister" :disabled="disabled" type="primary" html-type="submit" class="">
          注册
        </a-button>
        Go
        <a @click="toLogin" >登录</a>
      </a-form-item>

    </a-form>
  </div>

</template>
<script lang="ts" setup>
import {computed, reactive, ref} from 'vue';
import type { Rule } from 'ant-design-vue/es/form';
import {validEmail} from "@/utils/validate"
import type { FormInstance } from 'ant-design-vue';
import {register} from "@/api/user";
import {message} from "ant-design-vue";
interface FormState {
  userName: string,
  password: string;
  checkPass: string;
  mailbox: string;
  verificationCode:string
}
const formRef = ref<FormInstance>();
const formState = reactive<FormState>({
  userName: '',
  password: '',
  checkPass: '',
  mailbox:'',
  verificationCode:''
});

const loading = ref<boolean>(false);
let checkEmail = async (_rule: Rule, value: string) => {
  if (!value) {
    return Promise.reject('请输入邮箱');
  }
  if(!validEmail(value)){
    return Promise.reject('请输入正确的邮箱');
  }
  return Promise.resolve();

};
let validatePass = async (_rule: Rule, value: string) => {
  if (value === '') {
    return Promise.reject('请输入密码');
  } else {
    if (value.length < 5 || value.length > 15) {
      return Promise.reject("密码长度大于5且小于15");
    }
    if (formState.checkPass !== '') {
      formRef.value.validateFields('checkPass');
    }
    return Promise.resolve();
  }
};
let validatePass2 = async (_rule: Rule, value: string) => {
  if (value === '') {
    return Promise.reject('请确认密码');
  } else if (value !== formState.password) {
    return Promise.reject("两次密码输入不一致");
  }  else {
    return Promise.resolve();
  }
};

let validateuserName = async (_rule: Rule, value: string) => {
  if (value === '') {
    return Promise.reject('请确认用户名');
  } else {
    if (value.length < 5 || value.length > 10) {
      return Promise.reject("用户名长度大于5且小于10");
    }
    return Promise.resolve();
  }
};

const rules: Record<string, Rule[]> = {
  userName:[{ required: true,  validator : validateuserName}],
  password: [{ required: true, validator: validatePass, trigger: 'change' }],
  checkPass: [{ required: true,validator: validatePass2, trigger: 'change' }],
  // mailbox: [{ required: true,validator: checkEmail, trigger: 'change' }],
  // verificationCode: [{ required: true, message:'验证码不能为空', trigger: 'change' }],

};
const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 14 },
};
const handleFinish = (values: FormState) => {
  //console.log(values, formState);
};
const handleFinishFailed = errors => {
 // console.log(errors);
};
const resetForm = () => {
  formRef.value.resetFields();
};
const handleValidate = (...args) => {
  //console.log(args);
};

const disabled = computed(() => {
  return !(formState.userName && formState.password);
});

const emit = defineEmits(['changeStatus'])
function toLogin (){
  emit('changeStatus')
}

const toRegister = async () => {
  try {
    loading.value = true;
    const values = await formRef.value.validateFields();
  //  console.log('Success:', values);
    await register(values);
    loading.value = false;
    message.success("注册成功！");
    toLogin();
  } catch (errorInfo) {
   // console.log('Failed:', errorInfo);
  } finally {
    loading.value = false;
  }
}
</script>

